
import Api from '@/api/index';
import '@/assets/css/UserLogin.less';
import Rules from '@/rules';
import { NavLink, useNavigate } from 'react-router-dom';
import { Button, Field, Form, Notify } from 'react-vant';
const Footer = () => {
    return (
        <>
            <div className="action" style={{ display: "flex" }}>
                <Button className="btn" block round nativeType='submit'>登录</Button>
                <Button className="btn" block round>
                    <NavLink to='/user/base/register' className="btn">注册</NavLink>
                </Button>
            </div>
        </>
    )
}

const Register = () => {
    const [form] = Form.useForm()
    let Navigate = useNavigate()
    const onRegister = async (values) => {
        let data = {
            email: values.email,
            password: values.password
        }

        let result = await Api.ApiRegister(data)

        if (result.code === 0) {
            Notify.show({
                type: 'danger',
                message: result.msg
            })
            return false
        } else {
            Notify.show({
                type: 'success',
                message: result.msg,
                onClose: () => {
                    Navigate(result.url)
                }
            })
        }
    }
    return (
        <>
            {/* <!-- 用户信息 --> */}
            <div className="user">
                <div className="avatar wow fadeInUp">
                    <img src="../../assets/images/avatar.png" alt="" />
                </div>
                <div className="notice wow fadeInUp" data-wow-delay="100ms" >请填写已有账号或新注册账号</div>
            </div>
            <Form className="login wow fadeInUp" data-wow-delay="200ms" form={form} colon={true} onFinish={onRegister}>
                <Form.Item
                    labelWidth='3em'
                    // rules={[{ required: true, message: '请填写邮箱' }]}
                    labelAlign='right'
                    rules={Rules.email}
                    name="email"
                    label="邮箱"
                >
                    <Field placeholder="请输入邮箱" />
                </Form.Item>
                <Form.Item
                    // rules={[{ required: true, message: '请填写密码' }]}
                    rules={Rules.password}
                    labelAlign='right'
                    name="password"
                    label="密码"
                    labelWidth='3em'
                >
                    <Field type='password' placeholder="请输入密码" />
                </Form.Item>
                <Footer />
            </Form>
        </>
    )
}
export default Register